<template>
  <el-form class="detailsTwo" :rules="rules" :model="queryParams" ref="queryForm" :inline="true">
    <el-form-item label="签订日期" prop="signTime">
      <el-date-picker
        v-model="queryParams.signTime"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="租赁开始时间" prop="contractStartTime">
      <el-date-picker
        v-model="queryParams.contractStartTime"
        type="date"
        placeholder="选择日期">>
      </el-date-picker>
    </el-form-item>

    <el-form-item label="租金时长" prop="leaseTerm">
      <el-input class="uniSel" v-model="queryParams.leaseTerm" placeholder="请输入租期" @change="sumContarctAmount">
        <el-select v-model="queryParams.leaseTermUtil" slot="append" placeholder="请选择时长单位">
          <el-option
            v-for="(dict,i) in dict.type.lease_term_type"
            :key="i"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-input>
    </el-form-item>

    <div class="title">租赁面积{{ conductionData.houseArea }} ㎡</div>

    <div class="title">租金平均单价{{ conductionData.houseRentPrice }} 元/㎡/天</div>

    <div class="title">管理费平均单价{{ conductionData.houseProperPrice }} 元/㎡/月</div>


    <el-divider content-position="left">固定租金</el-divider>

    <el-form-item label="租金总额" prop="rentfee">
      <el-input-number v-model="queryParams.rentfee" controls-position="right"
                       @change="sumContarctAmount"></el-input-number>
      元
    </el-form-item>

    <el-form-item label="管理费总额" prop="propertyfee">
      <el-input-number v-model="queryParams.propertyfee" controls-position="right"
                       @change="sumContarctAmount"></el-input-number>
      元
    </el-form-item>

    <div class="dead_rent">
      <el-form-item label="付款方式" prop="payRate">
        <el-radio-group v-model="queryParams.payRate">
          <!--          <el-radio :label="1">按天</el-radio>-->
          <el-radio label="2">按月</el-radio>
          <el-radio label="3">按季度</el-radio>
          <el-radio label="4">按半年</el-radio>
          <el-radio label="5">按年</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="押付方式" prop="bondfee">
            <el-input-number v-model="queryParams.bondmouth" controls-position="right" :min="1"
                             :max="12"></el-input-number>
            月
            <el-input-number v-model="queryParams.bondfee" controls-position="right"
                             @change="sumContarctAmount"></el-input-number>
            元
          </el-form-item>
        </el-col>

      </el-row>


      <el-form-item label="总计" prop="contarctAmount">
        <el-input-number v-model="queryParams.contarctAmount" controls-position="right"></el-input-number>
        元
      </el-form-item>
    </div>

    <div class="el-button-box">
      <el-button type="primary" icon="el-icon-search" size="mini" @click="send">提交</el-button>
    </div>

  </el-form>
</template>
<style lang="scss">
  .detailsTwo {
    > .el-form-item {
      .el-form-item__label {
        width: 110px;
      }
    }

    .uniSel {
      width: 450px;

      > .el-input-group__append {
        width: auto;
      }
    }

    .title {
      margin: 10px 0 30px;
      text-align: center;
    }

    .dead_rent {
      width: 70%;
      margin: 0 auto 22px;

      .el-form-item {
        width: auto !important;
        display: inline-block !important;
      }

      .el-form-item__label {
        width: 115px;
      }

      .el-input-group--append .el-input__inner {
        width: 110px;
      }

      .el-select {
        width: auto;
      }

      .el-input-group__append .el-input__inner {
        width: 125px;
      }

      .el-input-number--medium {
        width: 200px;
      }
    }

    .el-row {
      padding: 0;
    }

    .el-table {
      marign: 20px 0;
    }
  }
</style>
<script>
  import {listContarct, getContarct, delContarct, addContarct, updateContarct} from "@/api/contarct/contarct";
  import {formatDate} from "@/utils/index"

  export default {
    name: "Contarct",
    dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type', 'lease_term_type'],
    data() {
      var validatePass = (rule, value, callback) => {
        if (!value && value != 0) {
          callback(new Error('租金不能为空！'));
        } else if (parseFloat(value) <= 0) {
          callback(new Error('租金需大于0！'));
        } else {
          callback();
        }
      }
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {},
        payRate: 5,
        // 表单校验
        rules: {
          signTime: this.commonRequired("签订日期不能为空！"),
          contractStartTime: this.commonRequired("租赁日期不能为空！"),
          leaseTerm: this.commonRequired("租金时长不能为空！"),
          rentfee: this.commonRequired("租金总额不能为空！"),
          payRate: this.commonRequired("付款方式不能为空！"),
          contarctAmount:[{
            validator: validatePass, trigger: 'change', required: true
          }]
        },
        tableData: [],
        creditCheckFlg: ['上海'],
        cities: ['上海', '北京', '广州', '深圳'],
        tableData: [],
        fukuan: false,
        rentMonthType: "2"
      };
    },
    created() {
      this.checkIsUpdate()
    },
    activated() {
      // this.getList();
      this.checkIsUpdate()
    },
    methods: {
      commonRequired(value) {
        return this.conductionData.commonFun.commonRequired(value);
      },
      checkIsUpdate() {
        var D = this.conductionData.contractInfo;
        D.payRate = D.payRate ? D.payRate + '' : '';
        D.leaseTermUtil = D.leaseTermUtil ? String(D.leaseTermUtil) : '';
        this.queryParams = D;
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          contarctCode: null,
        };
        this.resetForm("form");
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 生成付款计划 */
      FuKuan() {
        this.fukuan = true;
      },
      // 提交
      send() {
        this.$refs["queryForm"].validate(valid => {
          console.log(1, this.queryParams)
          if (valid) {
            if (this.queryParams.leaseTermUtil === null || !this.queryParams.leaseTermUtil) {
              this.$modal.msgError("时长单位不能为空！");
              return
            }
            this.sumContarctAmount()
            var type = this.$route.query.type;
            console.log(type);
            const request = {
              id: type === "contarctUpdate" ? this.conductionData.updateContractId : this.conductionData.contractId,
              contractStartTime: formatDate(this.queryParams.contractStartTime),
              signTime: formatDate(this.queryParams.signTime),
              leaseTerm: this.queryParams.leaseTerm,
              leaseTermUtil: parseInt(this.queryParams.leaseTermUtil),
              rentfee: this.queryParams.rentfee,
              propertyfee: this.queryParams.propertyfee,
              payRate: parseInt(this.queryParams.payRate),
              bondfee: this.queryParams.bondfee,
              bondmouth: this.queryParams.bondmouth,
              allarea: this.conductionData.houseArea,
              contarctAmount: this.queryParams.contarctAmount
            }
            updateContarct(request)
              .then(response => {
                console.log(response)
              })
            this.$emit("ComponentType", "detailsThree");
          }
        });
      },
      // 返回
      cancel() {
        this.$emit("ComponentType", "detailsOne");
      },
      sumContarctAmount() {
        this.queryParams.contarctAmount = this.queryParams.rentfee + this.queryParams.propertyfee + this.queryParams.bondfee
        this.queryParams.contarctAmount = parseFloat((this.queryParams.contarctAmount).toFixed(2))
      },
      reckonFee() {
        if (2 === this.queryParams.leaseTermUtil) {//月

        }
        if (3 === this.queryParams.leaseTermUtil) {//季度

        }
        if (4 === this.queryParams.leaseTermUtil) {//半年

        }
        if (5 === this.queryParams.leaseTermUtil) {//年

        }
      }
    }
  };
</script>
